@use '../mixins/mixins' as mixins;

.lf-imageeditor {
  & {
    --lf-slider-label-min-width: 128px;
    --lf-slider-label-overflow: hidden;
    --lf-slider-label-white-space: pre;

    @include mixins.lf-root($max: false);
    position: relative;
  }

  &__actions {
    display: flex;
    width: 100%;
  }

  &__grid {
    & {
      @include mixins.lf-el-stretch;
      display: grid;
      grid-template-rows: 1fr;
    }

    &--has-actions {
      grid-template-rows: auto 1fr;
    }

    &--is-inactive {
      & {
        pointer-events: none;
      }

      &:after {
        @include mixins.lf-el-stretch;
        background-color: rgba(var(--lf-color-bg), 0.875);
        content: '';
        cursor: not-allowed;
        left: 0;
        position: absolute;
        top: 0;
      }
    }
  }

  &__settings {
    & {
      @include mixins.lf-el-stretch;
      align-items: center;
      display: grid;
      grid-area: settings;
      grid-template-rows: 1fr auto;
    }

    &__controls {
      @include mixins.lf-el-stretch;
      align-items: center;
      display: grid;
      overflow: auto;
      padding: 12px 24px;
    }
  }

  &__widget {
    @include mixins.lf-el-stretch;
    overflow: auto;
  }

  lf-toggle {
    justify-items: center;
  }
}
